<template>
  <div class="box">
    <div class="means">
      <div class="tips">流程</div>
      <div class="btn">
        <el-button @click="pre" type="primary" icon="el-icon-arrow-left"
          >上一步</el-button
        >
        <el-button @click="next" type="primary"
          >下一步<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
      </div>
      <el-steps
        class="step"
        direction="vertical"
        :active="step"
        :align-center="true"
        finish-status="success"
      >
        <el-step
          v-for="(item, index) in arr"
          :key="index"
          :title="item.name"
        ></el-step>
      </el-steps>
    </div>
    <div class="form">
      <div class="contented">
        <component :is="arr[step].component" ref="formRef"></component>
      </div>
      <div class="btn">
        <el-button type="primary" @click="reserve">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '取水许可证照面信息',
          id: 0,
          component: () => import('./taskForms/oneTask.vue'),
        },
        {
          name: '取水权人基本信息',
          id: 1,
          component: () => import('./taskForms/twoTask.vue'),
        },
        {
          name: '取水工程信息',
          id: 2,
        },
        {
          name: '用水监管',
          id: 3,
        },
        {
          name: '供水监管',
          id: 4,
        },
        {
          name: '退水监管',
          id: 5,
        },
        {
          name: '申请人信息',
          id: 6,
        },
        {
          name: '论证报告信息',
          id: 7,
        },
        {
          name: '申报信息',
          id: 8,
        },
        {
          name: '审核开发证',
          id: 9,
        },
      ],
      step: 1,
    };
  },
  methods: {
    pre() {
      if (this.step === 0) return;
      this.step--;
    },
    next() {
      if (this.step >= this.arr.length) return;
      this.step++;
    },
    reserve() {
      this.$refs.formRef.submitForm('ruleForm');
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 100%;
  background-color: #fff;
  padding: 30px;
  height: 100%;
  .means {
    display: flex;
    flex-direction: column;
    width: 250px;
    padding-right: 20px;
    .tips {
      text-align: center;
      background-color: #5f9ea0;
    }
    .btn {
      padding: 15px;
      display: flex;
      justify-content: space-between;
    }
    .step {
      flex: 1;
    }
  }

  .form {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .contented{
      flex: 1
    }
    .btn {
      align-self: center;
    }
  }
}

::v-deep {
  .el-step__main {
    text-align: center;
  }
  .el-step.is-vertical .el-step__title {
    font-size: 16px;
  }
}
</style>
